<template>
  <view class="party">
    <view class="hd_jn" @click="jnshowfun">
      <image src="/static/images/hd_jn.png"></image>
      <view class="hd_jn-text"> 活动规则 </view>
    </view>
    <view class="party-bc">
      <image :src="imgurl + inpayimg" mode="widthFix"></image>
    </view>
    <view class="party-view" v-if="subjectList.length > 0">
      <!-- <view class="party-icon" v-if="subjectList[topicindex].titleType==1">
				<image src="/static/images/icon_wh.png" mode="widthFix"></image>
				
			</view> -->
      <view
        class="party-view-top"
        :style="{
          color:
            subjectList[topicindex] && subjectList[topicindex].subjectTitleColor
              ? subjectList[topicindex].subjectTitleColor
              : '#ffffff',
        }"
      >
        {{ subjectList[topicindex] && subjectList[topicindex].subjectTitle }}
      </view>

      <!-- subjectType 题目类型 1:单选题 2:填空题 -->
      <!-- titleType 标题类型  1:文本 2:图片 3:视频 4:音频 -->
      <view
        class="text-images"
        v-if="subjectList[topicindex] && subjectList[topicindex].titleType == 2"
        @click="goimg(subjectList[topicindex].subjectImagelist)"
      >
        <!-- {{imgurl+subjectList[topicindex].subjectImage}} -->
        <u-swiper
          :list="subjectList[topicindex].subjectImagelist"
          @click="swiperfun"
        ></u-swiper>
        <!-- <image :src="imgurl + subjectList[topicindex].subjectImage" mode="widthFix"></image> -->
      </view>
      <view
        class="page-section page-section-gap"
        style="text-align: center"
        v-if="subjectList[topicindex] && subjectList[topicindex].titleType == 4"
      >
        <audio
          style="text-align: left"
          :src="imgurl + subjectList[topicindex].subjectFile"
          :poster="''"
          :name="'音频资料'"
          :author="''"
          :action="audioAction"
          controls
        ></audio>
      </view>
      <video
        id="myVideo"
        v-if="subjectList[topicindex] && subjectList[topicindex].titleType == 3"
        :src="imgurl + subjectList[topicindex].subjectFile"
        @timeupdate="bindtimeupdate"
      ></video>

      <view class="text-input" v-if="subjectList[topicindex].subjectType == 2">
        <u-input
          v-model="subjectList[topicindex].content"
          type="textarea"
          axlength="300"
          placeholder="请输入"
          height="200"
          :auto-height="true"
          :custom-style="{ backgroundColor: '#ffffff', borderRadius: '25rpx' }"
        />
      </view>

      <view
        class="select-text"
        v-for="(item, index) in subjectList[topicindex] &&
        subjectList[topicindex].optionList"
        :key="index"
        @click="optionselectfun(index)"
        v-if="
          subjectList[topicindex] && subjectList[topicindex].subjectType == 1
        "
      >
        <view class="select-text-left">
          <view class="select-text-titleicon">
            <image
              src="/static/images/icon_noselect.png"
              v-if="!item.select"
            ></image>
            <image
              src="/static/images/icon_select.png"
              v-if="item.select"
            ></image>
          </view>
          <view
            class="select-text-title"
            :style="{
              color:
                subjectList[topicindex] &&
                subjectList[topicindex].optionList &&
                subjectList[topicindex].optionList[index].optionTitleColor
                  ? subjectList[topicindex].optionList[index].optionTitleColor
                  : '#000000',
            }"
          >
            {{ item.optionTitle }}
          </view>
        </view>
        <view class="select-text-right">
          <image
            src="/static/images/icon_yes.png"
            v-if="
              subjectList[topicindex].select &&
              item.optionAnswer == 1 &&
              isshowtthree
            "
          ></image>
          <image
            src="/static/images/icon_no.png"
            v-if="
              subjectList[topicindex].select &&
              item.optionAnswer == 0 &&
              item.select &&
              isshowtthree
            "
          ></image>
        </view>
      </view>
      <view
        class="select-text"
        v-for="(item, index) in subjectList[topicindex] &&
        subjectList[topicindex].optionList"
        :key="index"
        @click="optionselectfun(index)"
        v-if="
          subjectList[topicindex] && subjectList[topicindex].subjectType == 3
        "
      >
        <view class="select-text-left">
          <view class="select-text-titleicon">
            <image
              src="/static/images/icon_noselect.png"
              v-if="!item.select"
            ></image>
            <image
              src="/static/images/icon_select.png"
              v-if="item.select"
            ></image>
          </view>
          <view
            class="select-text-title"
            :style="{
              color:
                subjectList[topicindex] &&
                subjectList[topicindex].optionList &&
                subjectList[topicindex].optionList[index].optionTitleColor
                  ? subjectList[topicindex].optionList[index].optionTitleColor
                  : '#000000',
            }"
          >
            {{ item.optionTitle }}
          </view>
        </view>
        <view class="select-text-right">
          <!-- <image src="/static/images/icon_yes.png"
						v-if="subjectList[topicindex].select&&item.optionAnswer==1&&item.select&&isshowtthree"></image> -->
          <image
            src="/static/images/icon_yes.png"
            v-if="
              subjectList[topicindex].select &&
              item.optionAnswer == 1 &&
              isshowtthree
            "
          ></image>
          <image
            src="/static/images/icon_no.png"
            v-if="
              subjectList[topicindex].select &&
              item.optionAnswer == 0 &&
              item.select &&
              isshowtthree
            "
          ></image>
        </view>
      </view>
      <view
        class="bt-k"
        v-if="!isshowtthree && subjectList.length - 1 > topicindex"
      >
        <!-- <u-button size="medium" @click="lastfun">上一题 </u-button> -->
        <!-- <view>

				</view> -->
        <u-button size="default" @click="nextfun">下一题</u-button>
      </view>
      <view class="bt-ktj" v-if="subjectList.length - 1 == topicindex">
        <u-button size="default" @click="submitfun">提交 </u-button>
      </view>
    </view>

    <!-- <view class="bt-dk" @click="cjfun" v-if="reachFlag==1">
			达标打卡
		</view> -->

    <!-- 	<view class="popup" v-if="showpopup">
			<view class="popup-k">
				<image src="/static/images/Popup.png" mode="widthFix"></image>
				<view class="bt">
					进入商场
				</view>
			</view>
			
		</view> -->
    <!-- <u-popup  v-model="showpopup" mode="center" border-radius="45"  @close="failclose" @open="failopen" :closeable="true" :overlay="true">
		      <view class="fail-k fail-kan">
				  
				  <view class="fail-image-icon">
				  	<image src="/static/images/icom-wx.png" ></image>
				  </view>
		         <view class="fail-title">
		          	等待审核
		          </view>
					 <view class="fail-content">
					 	审核时间为24小时内，审核通过后，<br>
                       可通过首页活动列表去往商城
					 </view>
					 <view class="fail-bt" @click="goshop">
					 	进入商场
					 </view>
					 <view class="fail-bt-new" @click="goshop">
					 	再来一次
					 </view>
		      </view>
		 	</u-popup> -->

    <u-popup
      v-model="showpopup"
      mode="center"
      border-radius="45"
      @close="failcloseout"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k fail-kan">
        <view class="fail-image-icon">
          <image src="/static/images/icom-wx.png"></image>
        </view>
        <view class="fail-title"> 等待审核 </view>
        <view class="fail-content">
          审核时间为24小时内，审核通过后，<br />
          可通过首页活动列表去往商城
        </view>
        <view class="fail-bt" @click="gohome"> 去首页 </view>
        <!-- <view class="fail-bt-new" @click="gorest">
						 	再来一次
						 </view> -->
      </view>
    </u-popup>
    <!-- showpopupsuccess -->
    <u-popup
      v-model="showpopupsuccess"
      mode="center"
      border-radius="45"
      @close="failclosesuccess"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k fail-kan showpopupsuccess">
        <view class="fail-image-icon showpopupsuccess-icon">
          <image
            :src="
              successFlag == 1
                ? '/static/images/icon-cg.png'
                : '/static/images/icon-sb.png'
            "
          ></image>
        </view>
        <!-- <view class="fail-title">
          {{ successFlag == 0 ? '挑战失败' : '挑战成功' }}
        </view> -->
        <view class="fail-num"
          >您的成绩为：<text>{{ rewardPoint }}</text>
        </view>
        <view class="fail-max" v-if="surplusJoinNum > 0">
          您还可以参与{{ surplusJoinNum }}次
        </view>
        <!-- <view class="fail-content">
							 	审核时间为24小时内，审核通过后，<br>
				               可通过首页活动列表去往商城
							 </view> -->
        <view class="fail-bt" @click="gohome"> 去首页 </view>
        <view class="fail-bt-new" @click="goshop" v-if="shopFlag2 == 1">
          去商城
        </view>

        <view
          class="fail-bt-new"
          @click="gorest"
          v-if="successFlag == 0 && surplusJoinNum > 0"
        >
          再来一次
        </view>
      </view>
    </u-popup>

    <u-popup
      v-model="failshow"
      mode="center"
      border-radius="45"
      @close="failclose"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k">
        <view class="fail-title"> 温馨提示 </view>
        <view class="fail-content"> 您已参与，且积分已发放 </view>
        <view class="fail-bt"> 查看积分 </view>
      </view>
    </u-popup>

    <u-popup
      v-model="noinshow"
      mode="center"
      border-radius="45"
      @close="failclose"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k">
        <view class="fail-title"> 对不起暂无活动资格 </view>
        <view class="fail-content"> 请联系客服咨询 </view>
        <view class="fail-bt" @click="gohome"> 首页 </view>
      </view>
    </u-popup>
    <u-popup
      v-model="norsshow"
      mode="center"
      border-radius="35"
      @close="failclose"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k">
        <view class="fail-title"> 温馨提示 </view>
        <view class="fail-content"> 活动人数已满 </view>
        <view class="fail-bt" @click="gohome"> 首页 </view>
      </view>
    </u-popup>
    <u-popup
      v-model="jnshow"
      mode="center"
      border-radius="35"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k jnshow-k">
        <view class="fail-title jnshow-title"> 活动介绍 </view>
        <view class="fail-content jnshow-content" v-html="shuoming"> </view>
      </view>
    </u-popup>

    <!-- <u-popup
      v-model="payshow"
      mode="center"
      border-radius="10"
      :mask-close-able="false"
      :closeable="false"
      :overlay="true"
    >
      <view class="fail-k payshow-k">
        <view class="fail-title jnshow-title"> 活动介绍 </view>
        <view class="fail-content jnshow-content" v-html="shuoming">
         
        </view>
        <view class="payshow-bt">
          <button
            @click="
              () => {
                payshow = false
              }
            "
          >
            我已知晓以上活动内容
          </button>
        </view>
      </view>
    </u-popup> -->
  </view>
</template>

<script>
import {
  getSessionKey,
  grantWxStep,
  beginActivity,
  submitAnswer,
} from '@/api/index/index'
import { BASE_URL_IMAHE } from '../../../utils/https'

const app = getApp()
export default {
  data() {
    return {
      imgurl: BASE_URL_IMAHE,
      historyTime: 0,
      form: {},
      showpopup: false,
      showpopupsuccess: false,
      jumpShopLink: '',
      noinshow: false,
      failshow: false,
      norsshow: false,
      sectionInfo: {
        type_config: {
          video_url: '',
        },
      },
      jnshow: false,
      inpayimg: '',
      whiteListId: '',
      joinRecordId: '',
      token: '',
      topicindex: 0,
      subjectList: [],
      audioAction: {
        method: 'pause',
      },
      surplusJoinNum: 0,
      rewardPoint: 0,
      successFlag: 0,
      resttype: false,
      shuoming: '',
      payshow: true,
      isshowtthree: false,
    }
  },
  onLoad(options) {
    // this.$nextTick(() => {
    //   this.showpopupsuccess = true
    //   this.surplusJoinNum = 0
    //   this.rewardPoint = 20
    //   this.successFlag = 0
    // })
    var sjs = this.randomWord()
    var datatime = Date.parse(new Date())
    var tokens = '' + sjs + '' + datatime
    this.token = tokens
    //   this.type=uni.getStorageSync("type")
    //   this.form.v=uni.getStorageSync("v")
    if (!options.activityId) {
      // 跳转回原页面
      if (getCurrentPages().length == 1) {
        uni.reLaunch({
          url: '/pages/index/index',
        })
      } else {
        uni.navigateBack({
          delta: 1,
        })
      }
    } else {
      this.form.activityId = options.activityId
      this.form.userRef = uni.getStorageSync('userRef')
      this.getlist()
    }
  },
  methods: {
    failopen() {},
    bh(index1, index2) {},
    jnshowfun() {
      this.jnshow = true
    },
    goimg(img) {
      // 预览图片
      uni.previewImage({
        urls: img,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function (data) {
            console.log(
              '选中了第' +
                (data.tapIndex + 1) +
                '个按钮,第' +
                (data.index + 1) +
                '张图片'
            )
          },
          fail: function (err) {
            console.log(err.errMsg)
          },
        },
      })
    },
    optionselectfun(index) {
      if (this.isshowtthree) {
        return
      }
      let isselect = this.subjectList[this.topicindex].select
      if (
        this.subjectList[this.topicindex] &&
        this.subjectList[this.topicindex].subjectType == 1 &&
        this.subjectList[this.topicindex].select
      ) {
        this.subjectList[this.topicindex].optionList.forEach(
          (element2, index2) => {
            element2.select = false
          }
        )
        this.subjectList[this.topicindex].optionList[index].select = true

        // if (this.subjectList[this.topicindex].select && !this.subjectList[this.topicindex].optionList[index]
        // 	.select) {
        // 	uni.showToast({
        // 		title: "此题为单选题请取消选择，再作答",
        // 		icon: "none"
        // 	})
        // 	return

        // } else {
        // 	this.subjectList[this.topicindex].optionList[index].select = false
        // 	this.subjectList[this.topicindex].select = false
        // }
      }
      // if (this.subjectList[this.topicindex].select && this.subjectList[this.topicindex].subjectType == 3 && this
      // 	.isshowtthree) {
      // 	uni.showToast({
      // 		title: "此题已作答",
      // 		icon: "none"
      // 	})
      // 	return
      // }
      if (
        !isselect &&
        this.subjectList[this.topicindex] &&
        this.subjectList[this.topicindex].subjectType == 1
      ) {
        this.subjectList[this.topicindex].select = true
        if (
          this.subjectList[this.topicindex] &&
          this.subjectList[this.topicindex].subjectType == 1
        ) {
          // this.subjectList[this.topicindex].optionList.forEach((element2, index2) => {

          // 	element2.select = false
          // 	this.subjectList[this.topicindex].optionList[index].select = true

          // })
          this.subjectList[this.topicindex].optionList[index].select = true
        }
        return
      }

      if (
        this.subjectList[this.topicindex] &&
        this.subjectList[this.topicindex].subjectType == 3
      ) {
        this.subjectList[this.topicindex].select = true
        // if(){

        // }
        // this.subjectList[this.topicindex].optionList[index].selectindex.push(this.subjectList[this.topicindex].optionList[index].id)
        this.subjectList[this.topicindex].optionList[index].select =
          !this.subjectList[this.topicindex].optionList[index].select
      }

      // setTimeout(() => {
      // 	if(this.subjectList[this.topicindex].subjectType==1){
      // 		this.nextfun()
      // 	}

      // }, 1500)
    },
    swiperfun(index) {
      console.log(index)
      let that = this
      uni.previewImage({
        urls: [that.subjectList[that.topicindex].subjectImagelist[index]],
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function (data) {
            console.log(
              '选中了第' +
                (data.tapIndex + 1) +
                '个按钮,第' +
                (data.index + 1) +
                '张图片'
            )
          },
          fail: function (err) {
            console.log(err.errMsg)
          },
        },
      })
    },
    lastfun() {
      if (this.topicindex <= 0) {
        uni.showToast({
          title: '请做题，已是第一题',
          icon: 'none',
        })
        this.topicindex = 0
        return
      }
      this.topicindex--
    },
    nextfun(type = 1) {
      if (type == 2) {
        if (
          this.subjectList[this.topicindex].subjectType == 3 ||
          this.subjectList[this.topicindex].subjectType == 1
        ) {
          this.isshowtthree = true
        } else {
          this.isshowtthree = false
        }
        return
      }

      if (
        this.subjectList[this.topicindex] &&
        this.subjectList[this.topicindex].subjectType == 1
      ) {
        if (!this.subjectList[this.topicindex].select) {
          uni.showToast({
            title: '请先完成题目',
            icon: 'none',
          })
          return
        }
      } else if (
        this.subjectList[this.topicindex] &&
        this.subjectList[this.topicindex].subjectType == 2
      ) {
        if (!this.subjectList[this.topicindex].content) {
          uni.showToast({
            title: '请先完成题目',
            icon: 'none',
          })
          return
        }
      } else if (
        this.subjectList[this.topicindex] &&
        this.subjectList[this.topicindex].subjectType == 3
      ) {
        if (!this.subjectList[this.topicindex].select) {
          uni.showToast({
            title: '请先完成题目',
            icon: 'none',
          })
          return
        }
      }

      if (
        this.topicindex >= this.subjectList.length - 1 &&
        this.subjectList[this.topicindex].subjectType != 3
      ) {
        uni.showToast({
          title: '已是最后一题',
          icon: 'none',
        })

        this.topicindex = this.subjectList.length - 1
        return
      }

      if (
        this.subjectList[this.topicindex].subjectType == 3 ||
        this.subjectList[this.topicindex].subjectType == 1
      ) {
        this.isshowtthree = true
        setTimeout(() => {
          this.topicindex++
          this.isshowtthree = false
        }, 1500)
      } else {
        this.isshowtthree = false
        this.topicindex++
      }
    },
    goshop(url) {
      window.location.href = this.jumpShopLink
    },
    gorest() {
      this.resttype = true
      this.showpopup = false
      this.showpopupsuccess = false
      setTimeout(() => {
        this.resttype = false
      }, 5)
    },
    failclose() {
      uni.navigateBack({
        delta: 1,
      })
    },
    failcloseout() {
      uni.navigateBack({
        delta: 1,
      })
    },
    failclosesuccess() {
      if (this.resttype) {
        return
      }
      uni.navigateBack({
        delta: 1,
      })
    },
    gohome() {
      uni.reLaunch({
        url: '/pages/home/index',
      })
    },
    async getlist() {
      this.inpayimg = null
      const resindex = await beginActivity(JSON.stringify(this.form))

      if (resindex.result == 0) {
        this.shopFlag2 = resindex.activity.shopFlag2
        console.log(resindex)
        if (resindex.examineFlag && resindex.examineFlag == 1) {
          this.showpopup = true
        }
        if (resindex.examineFlag && resindex.examineFlag == 0) {
          this.showpopupsuccess = true
          this.surplusJoinNum = resindex.surplusJoinNum
          this.rewardPoint = resindex.rewardPoint
          this.successFlag = resindex.successFlag
        }

        uni.setNavigationBarTitle({
          title:
            resindex.activity && resindex.activity.title
              ? resindex.activity.title
              : '党建', // 新标题内容
        })

        if (!resindex.subjectList) {
          return
        }

        //   that.joinRecordId=resindex.activity.joinRecordId
        //   that.sportStep=resindex.activity.sportStep
        // that.whiteListId=resindex.activity.whiteListId
        // 				that.getdataobj(res.encryptedData,res.iv)
        if (resindex.subjectList && resindex.subjectList.length > 0) {
          resindex.subjectList.forEach((element, index) => {
            console.log(element, 'sasd')
            if (element.titleType && element.titleType == 2) {
              element.subjectImagelist = element.subjectImage.split('|')

              element.subjectImagelist.forEach((element3, index3) => {
                let str = this.imgurl + element3
                element.subjectImagelist[index3] = str
                // 		element.subjectImagelist[index3]={}
                // 		element.subjectImagelist[index3]={
                // 	image:str,
                // 	title:"111",
                // }
                console.log(element3, 'element3')
              })
            }

            console.log(element.subjectImagelist)
            if (element.subjectType == 2) {
              element.content = ''
            }
            element.select = false
            if (element.optionList.length > 0) {
              element.optionList.forEach((element2, index2) => {
                element2.select = false
              })
            }
          })
        }

        this.subjectList = resindex.subjectList
        this.shuoming = resindex.activity.rule
        this.joinRecordId = resindex.activity.joinRecordId
        this.whiteListId = resindex.activity.whiteListId
        this.inpayimg = resindex.activity.posterBackdropImg
        app.globalData.data.inpayimg = this.inpayimg

        this.sectionInfo.type_config.video_url =
          BASE_URL_IMAHE + resindex.activity.videoTutorial
      } else if (resindex.result == -100) {
        // -100 不在活动白名单
        this.noinshow = true
      } else if (resindex.result == -101) {
        // -101 已参与活动
        this.failshow = true
      } else if (resindex.result == -102) {
        // -101 已参与活动
        this.norsshow = true
      } else {
        uni.showToast({
          title: '数据错误',
          icon: 'none',
        })
      }

      // 		const res=await getHistoryPage(JSON.stringify(this.form))
      // 		console.log(res)
      // this.toall=Math.ceil(res.page.count/res.page.pageSize)
      // this.historylist.push(...res.page.list)
      // this.form.pageNo++
    },
    async submitfun() {
      var subjectArr = []
      var submitselect = true
      // subjectId：题目Id
      // optionId：选项Id
      // answer：选项对错(传0或1)
      // content：填空题的内容
      this.subjectList.forEach((element, index) => {
        if (element.subjectType == 1) {
          if (!element.select) {
            submitselect = false
          }
          element.optionList.forEach((element1, index1) => {
            if (element1.select) {
              if (element1.optionAnswer == 1) {
                subjectArr.push({
                  subjectId: element.id,
                  optionId: element1.id,
                  answer: 1,
                  content: '',
                })
              } else {
                subjectArr.push({
                  subjectId: element.id,
                  optionId: element1.id,
                  answer: 0,
                  content: '',
                })
              }
            }
          })
        } else if (element.subjectType == 2) {
          if (!element.content) {
            submitselect = false
          }
          subjectArr.push({
            subjectId: element.id,
            content: element.content,
          })
        } else if (element.subjectType == 3) {
          let selectid = ''
          if (!element.select) {
            submitselect = false
          }
          element.optionList.forEach((element1, index1) => {
            if (element1.select) {
              if (selectid) {
                selectid = selectid + ',' + element1.id
              } else {
                selectid = element1.id
              }
            }
          })

          subjectArr.push({
            subjectId: element.id,
            optionId: selectid,
            answer: '',
            content: '',
          })
        }
      })

      if (!submitselect) {
        uni.showToast({
          title: '您有题目未作答，请先完成题目',
          icon: 'none',
        })
        return
      }

      this.nextfun(2)
      var res = null
      var data = null
      setTimeout(async () => {
        data = {
          activityId: this.form.activityId,
          whiteListId: this.whiteListId,
          joinRecordId: this.joinRecordId,
          userRef: this.form.userRef,
          token: this.token,
          subjectArr: subjectArr,
        }

        // return
        res = await submitAnswer(JSON.stringify(data))

        if (res.result == 0) {
          this.jumpShopLink = res.jumpShopLink ? res.jumpShopLink : ''
          if (res.examineFlag == 1) {
            this.showpopup = true
          }
          if (res.examineFlag == 0) {
            // this.showpopupsuccess=true
            this.surplusJoinNum = res.surplusJoinNum
            this.rewardPoint = res.rewardPoint
            this.successFlag = res.successFlag
            this.showpopupsuccess = true
          }
        } else {
          var sjs = this.randomWord()
          var datatime = Date.parse(new Date())
          var tokens = '' + sjs + '' + datatime
          this.token = tokens
        }
      }, 1500)
    },
    //获取
    async cjfun() {
      // this.showpopup=true
      // return
      var data = {
        activityId: this.form.activityId,
        whiteListId: this.whiteListId,
        joinRecordId: this.joinRecordId,
        userRef: this.form.userRef,
        token: this.token,
        subjectArr: subjectArr,
      }
      var res = await submitAnswer(JSON.stringify(data))

      if (res.result == 0) {
        this.jumpShopLink = res.jumpShopLink
        if (res.examineFlag == 1) {
          this.showpopup = true
        }
        if (res.examineFlag == 0) {
          this.surplusJoinNum = res.surplusJoinNum
          this.rewardPoint = res.rewardPoint
          this.successFlag = res.successFlag
          this.showpopupsuccess = true
        }
      } else {
        var sjs = this.randomWord()
        var datatime = Date.parse(new Date())
        var tokens = '' + sjs + '' + datatime
        this.token = tokens
      }
    },

    // 监听播放进度
    bindtimeupdate(e) {
      // return
      var currentTime = e.detail.currentTime //当前进度
      var duration = e.detail.duration //视频时长

      //视频播放完成后触发奖励保存接口
      let percent = 100 //播放进度百分比，可以改成 80 或者90等其它数字，到达时触发奖励保存
      // let percent = this.sectionInfo.type_config.video_complate_rate;
      let upper = duration * (percent / 100)
      if (currentTime >= upper) {
        if (this.isTo) {
          this.isTo = false //isTo 奖励加锁，进入页面只能触发一次

          console.log('触发奖励请求接口')
          // this.$request(this.$api.Weike.sectionComplete, this.options).then((res) => {});
        }
      }

      // 禁止拖动进度条快进
      if (currentTime - this.historyTime > 2) {
        uni.showToast({
          title: '不能快进哦',
          icon: 'none',
        })
        let videoContext = wx.createVideoContext('myVideo')
        videoContext.seek(this.historyTime)
      }
      this.historyTime = currentTime
    },
    randomWord() {
      var chars = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'j',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z',
      ]
      var nums = ''
      for (var i = 0; i < 20; i++) {
        var id = parseInt(Math.random() * 61)
        nums += chars[id]
      }
      return nums
    },
  },
}
</script>
<style scoped lang="scss">
.party {
  width: 100%;
  height: 100vh;
  position: relative;

  .party-bc {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .party-view {
    width: 630rpx;
    position: absolute;
    top: 160rpx;
    left: -315rpx;
    text-align: center;
    margin-left: 50%;

    // margin: 0 auto;
    .text-images {
      margin-top: 33rpx;
      width: 100%;

      image {
        width: 100%;
      }
    }

    .text-input {
      background-color: #ffffff;
      border-radius: 25rpx;
      padding: 10rpx;
      margin-top: 33rpx;
    }

    .party-icon {
      text-align: center;

      image {
        width: 120rpx;
      }
    }

    #myVideo {
      width: 100%;
      height: 465rpx;
    }

    .party-view-top {
      font-size: 48rpx;
      text-align: center;
      font-weight: bold;
      color: #8e110e;
      margin-bottom: 45rpx;
    }

    .select-text {
      width: 100%;
      height: 110rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 43rpx;
      padding-right: 34rpx;
      background-color: white;
      border-radius: 15rpx;
      margin-top: 33rpx;
      // border: 1rpx solid #cbcbcb;
      // box-shadow:  #718096;
      box-shadow: 2rpx 2rpx 10rpx 1rpx #d5d5d5;

      .select-text-left {
        display: flex;
        align-items: center;

        .select-text-titleicon {
          image {
            width: 48rpx;
            height: 48rpx;
          }
        }

        .select-text-title {
          font-size: 28rpx;
          margin-left: 30rpx;
        }
      }

      .select-text-right {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    .bt-k {
      width: 100%;
      // display: flex;
      // justify-content: center;
      margin-top: 40rpx;
    }

    .bt-ktj {
      width: 100%;
      margin-top: 40rpx;
    }
  }
}

.bt-dk {
  width: 150rpx;
  height: 75rpx;
  background-color: #ffffff;
  border-radius: 50rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #8e110e;
  text-align: center;
  line-height: 75rpx;
  margin: 125rpx auto 0rpx;
}

.popup {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .popup-k {
    image {
      width: 530rpx;
    }

    .bt {
      position: relative;
      width: 400rpx;
      height: 88rpx;
      background-color: #48db8d;
      color: #ffffff;
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      line-height: 88rpx;
      margin: -95rpx auto 0;
      z-index: 1;
      border-radius: 50rpx;
    }
  }
}

// 弹框
.fail-k {
  width: 490rpx;
  height: 405rpx;
  box-sizing: border-box;
  // padding-top: 29rpx;
  text-align: center;
  // background: url("/static/images/popup-icon.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;

  .fail-image-icon {
    image {
      width: 231rpx;
      height: 231rpx;
    }
  }

  .fail-title {
    padding-top: 120rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #111827;
  }

  .fail-content {
    padding-top: 29rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #111827;
  }

  .fail-bt {
    margin: 55rpx auto 0rpx;
    width: 188rpx;
    height: 64rpx;
    background-color: #730017;
    font-size: 18rpx;
    color: #ffffff;
    border-radius: 35rpx;
    line-height: 64rpx;
  }
}

.fail-kan {
  padding-top: 100rpx;
  height: 800rpx;
  width: 600rpx;

  .fail-title {
    padding-top: 20rpx;
    color: #8a0002;
    font-size: 38rpx;
  }

  .fail-num {
    font-size: 120rpx;
    color: #8a0002;
  }

  .fail-max {
    margin-top: 40rpx;
    font-size: 24rpx;
    color: #000000;
  }

  .fail-content {
    font-size: 24rpx;
    padding-top: 64rpx;
    color: #8a0002;
    white-space: pre-wrap;
  }

  .fail-bt {
    margin: 55rpx auto 0rpx;
    width: 492rpx;
    height: 95rpx;
    background-color: #730017;
    font-size: 30rpx;
    color: #ffffff;
    border-radius: 15rpx;
    line-height: 95rpx;
  }

  .fail-bt-new {
    margin: 15rpx auto 0rpx;
    width: 492rpx;
    height: 95rpx;
    background-color: #ffffff;
    font-size: 30rpx;
    color: #730017;
    box-sizing: border-box;
    border: 2rpx solid #730017;
    border-radius: 15rpx;
    line-height: 95rpx;
  }
}
::v-deep .u-drawer-content {
  overflow: visible !important;
}
::v-deep .u-mode-center-box {
  overflow: visible !important;
}
::v-deep .uni-scroll-view {
  overflow: visible !important;
}
::v-deep .uni-scroll-view {
  overflow: visible !important;
}

.showpopupsuccess {
  padding-top: 50rpx;
  height: auto;
  padding-bottom: 80rpx;
  background: url('/static/images/tk-img.png') no-repeat bottom;
  background-size: 100% auto;
  .showpopupsuccess-icon {
    margin-top: -250rpx;
    image {
      width: 350rpx;
      height: 350rpx;
    }
  }
  .fail-num {
    margin-top: 51rpx;
    font-size: 26rpx;
    color: black;
    text {
      font-size: 40rpx;
      color: #8a0002;
    }
  }
  .fail-max {
    margin-top: 24rpx;
    font-size: 22rpx;
    color: #8a0002;
  }
  .fail-bt {
    width: 176rpx;
    height: 67rpx;
    border-radius: 35rpx;
    line-height: 63rpx;
  }
  .fail-bt-new {
    width: 176rpx;
    height: 67rpx;
    border-radius: 35rpx;
    line-height: 63rpx;
  }
}

.jnshow-k {
  width: 650rpx;
  height: auto;
  padding-bottom: 40rpx;

  .jnshow-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #111827;
  }

  .jnshow-content {
    margin-top: 29rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #718096;
    padding: 0 20rpx;
    white-space: pre-wrap;
    text-align: left;
  }
}

.po-k {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hd_jn {
  position: absolute;
  top: 29rpx;
  right: 16rpx;
  z-index: 10;
  font-size: 20rpx;
  text-align: center;
  color: #39393d;

  image {
    width: 90rpx;
    height: 92rpx;
    margin-bottom: 10rpx;
  }
}

.payshow-k {
  width: 720rpx;
  height: auto;
  max-height: 90vh;
  // padding-bottom: 100rpx;
  position: relative;

  .jnshow-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #111827;
  }

  .jnshow-content {
    margin-top: 29rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #718096;
    padding: 0 20rpx;
    white-space: pre-wrap;
    text-align: left;
    padding-bottom: 200rpx;
  }

  .payshow-bt {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 50rpx;
    font-size: 20rpx;

    button {
      background-color: #f1c16e;
      padding: 20rpx 40rpx;
      color: #ffffff;
    }
  }
}
</style>
